<template>
  <div class="cms-container">
    <div class="cms-title-container">
      <h1 class="cms-title">{{ state.formData.title }}</h1>
    </div>
    <div class="cms-content-container ql-editor">
      <div class="cms-content" v-html="state.formData.content" />
    </div>
  </div>
</template>
<script setup name="CmsDetail">
import { useRoute } from "vue-router";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { useMessage } from "@/hooks/message";
import { queryMessage, updateCloseMessage } from "@/api/admin/message/message/";
import { queryNotice, updateNoticeClose } from "@/api/admin/message/notice/";
import { queryDoc } from "@/api/admin/cms/doc/";

const route = useRoute();

const state = reactive({
  route: { query: { type: "message" } },
  formData: {
    type: "",
    id: "",
    title: "",
    content: ""
  }
});

const queryData = async () => {
  console.log(state.route, state.formData);
  if (state.formData.id) {
    if (state.formData.type === "message") {
      const res = await queryMessage(state.formData.id);
      if (res && res.code === 200) {
        state.formData.title = res.data.msgTitle;
        state.formData.content = res.data.msgContent;
        updateCloseMessage({ id: state.formData.id });
      } else {
        useMessage().warning(res.msg);
      }
    } else if (state.formData.type === "notice") {
      const res = await queryNotice(state.formData.id);
      if (res && res.code === 200) {
        state.formData.title = res.data.title;
        state.formData.content = res.data.noticeContent;
        updateNoticeClose({ id: state.formData.id });
      } else {
        useMessage().warning(res.msg);
      }
    } else if (state.formData.type === "doc") {
      const res = await queryDoc(state.formData.id);
      if (res && res.code === 200) {
        state.formData.title = res.data.docName;
        state.formData.content = res.data.docContent;
      } else {
        useMessage().warning(res.msg);
      }
    }
  }
};

nextTick(() => {
  state.formData.type = route.query.type;
  state.formData.id = route.query.id;
  state.formData.title = route.query.title;
  state.formData.content = route.query.content;
  state.route = {
    path: route.path,
    params: route.params,
    query: route.query,
    name: route.name,
    meta: route.meta
  };
  queryData();
});
</script>
<style lang="scss" scoped>
.cms-container {
  background-color: $main-bgc;
}
.cms-title-container {
  width: 100%;
  margin: 0px 0px;
  color: $base-border-color-base;
  text-align: center;
  height: 60px;
  font-size: 18px;
  background-color: $base-color-primary;
}

.cms-content-container {
  width: 80%;
  min-height: calc(100vh - 60px);
  background-color: white;
  margin: 0 auto;
}

.cms-content {
  font-size: 16px;
  padding: 5px 5px;
}
</style>
